<template>
    <view>
        <view class="components top-10">
            <view class="buildingWrap top-10" v-if="buildings.length > 0">
                <block v-for="(item, index) in buildings" :key="index">
                    <view class="buildBtn border-theme col-theme bg-fff text-center">
                        {{item}}
                        <text class="present font7 col-fff bg-error">本期</text>
                    </view>
                </block>
            </view>

            <block v-if="imgsList.length === 1">
                <view class="scrollTxt top-20 left-15 flex"><text class="point bg-theme right-5"></text><text>{{ imgsList[0].title }}</text></view>
				<image class="onleOneImg top-10 left-15 right-15" :src="imgsList[0].image[0].url" :lazy-load="true" mode="widthFix" @click="previewImages(0)"></image>
            </block>
            <block v-else>
                <view class="scrollTxt top-20 left-15 flex" v-if="imgsList[activeIndex].title"><text class="point bg-theme right-5"></text><text>{{ imgsList[activeIndex].title }}</text></view>
                <scroll-view id="scrollId" class="scrollWrap top-10" scroll-x="true" :scroll-left="scrolLeft" :scroll-with-animation="true" @scroll="scrollChange">
                    <view :id="'item'+index" class="itemWrap right-10" v-for="(item, index) in imgsList" :key="index">
                        <image class="imgItem" :src="item.image[0].url" :lazy-load="true" mode="heightFix" @click="previewImages(index)"></image>
                    </view>
                </scroll-view>
            </block>
        </view>
    </view>
</template>
<script>
	export default {
		data() {
			return {
                activeIndex: 0,
                scrollWidth: 0,
                itemWidthArr: [],
                intervalId: null,
                scrolLeft: 30,
                waitTime: 3
			};
		},
		props: {
            buildings: {
		        type: Array,
                default: () => ([])
            },
            imgsList: {
                type: Array,
                default: () => ([])
            },
            disadList: {
                type: Array,
                default: () => ([])
            },
            buildingDistList: {
                type: Array,
                default: () => ([])
            },
            spacingList: {
                type: Array,
                default: () => ([])
            }
		},
        
        mounted(){
            this.init()
        },

        onUnload() {
            if(this.intervalId) clearInterval(this.intervalId)
        },
		methods: {
            //初始化
            init() {
                const that = this;

                //设置scroll-view动画
                if(this.imgsList.length > 1) {
                    this.intervalId = setInterval(this.handleInterval, 500);
                }

                //获取均价图片节点
                setTimeout(() => {
                    that.slideAnchor();
                }, 500);
            },

            //执行动画
            handleInterval() {
                this.waitTime--;
                if(this.waitTime === 2) {
                    this.scrolLeft = 230
                }

                //倒计时结束
                if(this.waitTime <= 0) {
                    if(this.intervalId) clearInterval(this.intervalId);

                    this.$nextTick(function() {
                        this.scrolLeft = 0
                    })
                }
            },

            // 预览图片
            previewImages(index){
            	uni.previewImage({
            		current: index,
            		urls: this.imgsList.map(item => item.image[0].url),
            		longPressActions: {
            			itemList: ['发送给朋友', '保存图片', '收藏']
            		}
            	})
            },

            //获取锚点节点信息
            slideAnchor() {
                new Promise(resolve => {
                    let query = uni.createSelectorQuery().in(this);
                    query.select('#scrollId').boundingClientRect();
                    for(let i = 0; i < this.imgsList.length; i++) {
                        query.select(`#item${i}`).boundingClientRect();
                    }
                    query.exec(function(res) {
                        resolve(res)
                    })
                }).then(res => {
                    if(res[0] === null) return;
                    this.scrollWidth = res[0].width;
                    for(let i = 1; i < res.length; i++) {
                        this.itemWidthArr.push(res[i].width);
                    }
                })
            },

            //滚动事件
            scrollChange(e) {
                let scrollLeft = e.detail.scrollLeft;
                let activeIndex = 0;
                const WArr = this.itemWidthArr;
                let startWidth = 0;
                for(let i = 0; i < WArr.length; i++) {
                    startWidth+=(WArr[i]+5);
                    if(scrollLeft >=0 && scrollLeft < startWidth) {
                        activeIndex = i;
                        break;
                    }
                }
                this.activeIndex = activeIndex;
            }
		}
	}
</script>

<style scoped lang="scss">
	.components{
        .buildingWrap{
            display: flex;
            flex-wrap: wrap;
            gap: 15rpx 2%;
            padding: 0 15rpx 0 28rpx;
            .buildBtn{
                position: relative;
                width: 18%;
                line-height: 1;
                padding: 14rpx 0;
                border: 2rpx solid $theme-color;
                .present{
                    position: absolute;
                    top: 0;
                    right: 0;
                    padding: 2rpx 2rpx 4rpx 2rpx;
                    border-bottom-left-radius: 10rpx;
                }
            }
        }
        .scrollTxt{
            justify-content: flex-start;
            .point{
                width: 10rpx;
                height: 10rpx;
                border-radius: 50%;
            }
        }
        .onleOneImg{
            width: calc(100% - 60rpx);
        }
        .scrollWrap{
            width: 100%;
            height: 380rpx;
            white-space: nowrap;
            .itemWrap{
                display: inline-block;
                height: 100%;
                &:first-child{
                    margin-left: 28rpx;
                }
                &:last-child{
                    margin-right: 28rpx;
                }
                .imgItem{
                    height: 100%;
                }
            }
        }
	}
</style>